<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#wrap{
				position: relative;
				margin:240px 500px;
			}
			#time{
				position: absolute;
				top:66px;
				left: 63px;
				width: 180px;
				height: 16px;
				border-radius:9px ;
				background: red;
			}
			#score{
				color: white;
				position: absolute;
				left: 65px;
				top: 15px;
			}
			#start{
				position: absolute;
				/*top: 200px;
				left: 120px;*/
				text-decoration: none;
				color: #f60;
				/*font-size: 30px;*/
				/*border: 3px solid olive;*/
				margin: auto;
			}
			#shuoming{
				position: absolute;
				top: 240px;
				left: 90px;
				text-decoration: none;
				color: #f60;
				font-size: 30px;
				/*border: 3px solid olive;*/

				margin-top:20px;
			}
		</style>
	</head>
	<body>
		<div id="wrap" onselectstart="return false">
			<img src="/Users/zhaoce/Desktop/img/game_bg.jpg"/>
			<div id="time">

			</div>
			<div id="score">
				0
			</div>
			<a href="javascript:void(0)" id='start'>开始</a>
			<a href="javascript:void(0)" id="shuoming">操作说明</a>
		</div>
	</body>
	<script type="text/javascript">
		var downTimer;
		var outTimer;
		var posTimer;
		var num=0;
		var bol=false;
		var start=document.querySelector('#start');
		var shuoming=document.querySelector('#shuoming')
		var score=document.querySelector('#score');
	     var posArr=[{l:"98px",t:"115px"},{l:"17px",t:"160px"},{l:"15px",t:"220px"},{l:"30px",t:"293px"},
		{l:"122px",t:"273px"},{l:"207px",t:"295px"},{l:"200px",t:"211px"},{l:"187px",t:"141px"},{l:"100px",t:"185px"}]
		function $(val){
			return document.querySelector(val)
		}
		function timeLine(){
			var time=$('#time');
			var timeWidth=time.offsetWidth;
			var timer=setInterval(function(){
				timeWidth-=1;
				if (timeWidth==0) {
					clearInterval(timer)

				}
				time.style.width=timeWidth+'px';
			},300)
		}


		var walf=document.createElement('img');
		var wrap=$('#wrap');
		 wrap.appendChild(walf);
		var index=0;
		var imgType;
		start.onclick=function(){
			bol=true;
			shuoming.style.display='none';
			start.style.display='none';
			if (bol) {
				  getOut();
				  timeLine();
			}
		}


//		设置随机数
		function rand(min,max){
			return parseInt(Math.random()*(max-min))+min;
		}


		//设置位置

	 	function setPos(){
			var pos=rand(0,9);
			imgType=rand(0,100)>50?'x':'h';
			walf.style.left=posArr[pos].l;
			walf.style.top=posArr[pos].t;
			walf.style.position='absolute';
			}





//		点击事件

			function clicked()   {
			clearInterval(downTimer);
			clearInterval(outTimer);
			clearInterval(clickTimer);
			index=6;
			if (imgType=='h') {
				num+=10;
			}else{
				num-=10
			}
			score.innerHTML=num
			var clickTimer=setInterval(function(){
				walf.src='/Users/zhaoce/Desktop/img/'+imgType+index+'.png';
				index++;
				if (index==10) {
					clearInterval(clickTimer);

					down();
				}
				walf.onclick=function(){

				}
			},200)

		}




//		让狼出来
		function getOut(){

				setPos();

				index=0;
			 outTimer=setInterval(function(){

					walf.src='/Users/zhaoce/Desktop/img/'+imgType+index+'.png';
					index++;
					if (index==6) {
						clearInterval(outTimer);
						down();
					}
					walf.onclick=function(){
						clicked();
					}
				},200)

		}


	//让狼下去
			function down(){
				if(bol){
					index=6;
					downTimer=setInterval(function(){
						index--;
						walf.src='/Users/zhaoce/Desktop/img/'+imgType+index+'.png';
						if (index==0) {
							clearInterval(downTimer)
							getOut();
						}
						walf.onclick=function(){
						clicked();
					}
					},200)
				}
			}


	</script>
</html>
